<script setup>
import SvgIcon from '../components/SvgIcon.vue';
import { ref, reactive, onMounted, watch, nextTick } from 'vue'

const props = defineProps({
  message: {
    type: Array,
    required: true
  },
  interval: {
    type: String,
    default: '30'
  },
  title: {
    type: String,
    default: '公告'
  },
  speed: {
    type: Number,
    default: 1
  }
})
const messageBox = ref()
const message = ref(props.message)
const mesList = ref([])
const addEl = ref('')
const messageEls = (el) => {
  mesList.value.push(el)
}

onMounted(() => {

  // init()

})

watch(props, async() => {
  message.value = props.message
  await nextTick()
  init()
})


const initAnimation = () => {
  mesList.value.forEach(item => {
    let left = item.offsetLeft - props.speed;
    item.style.left = left + 'px'
    if (- left > item.clientWidth) {
      if (mesList.value.at(addEl.value).offsetLeft + mesList.value.at(addEl.value).clientWidth > messageBox.value.clientWidth && message.value.length > 1) {
        item.style.left = mesList.value.at(addEl.value).offsetLeft + mesList.value.at(addEl.value).clientWidth + 'px'
      } else {
        item.style.left = '100%'
      }


      if (addEl.value === message.value.length - 1) {
        addEl.value = 0
      } else {
        addEl.value += 1
      }
    }
  })
  requestAnimationFrame(initAnimation)
}


const init = () => {
  addEl.value = message.value.length - 1
  // 初始化消息位置
  mesList.value.forEach((item, index) => {
    if (!index) {
      item.style.left = 0
    } else {
      item.style.left = mesList.value[index - 1].offsetLeft + mesList.value[index - 1].clientWidth + 'px'
    }
  })
  if (message.value && message.value.length) setTimeout(() => requestAnimationFrame(initAnimation), 1000)
}


</script>

<template>
  <div class="swipe">
    <div class="horn-box">
      <SvgIcon class="horn" iconName="laba" />
      <div>{{ props.title }}：</div>
    </div>
    <div class="message" ref="messageBox">
      <p v-for="(item, index) in message" :key="index" :ref="messageEls"
        :style="{ color: item.color ? item.color : '#333333', paddingRight: props.interval + 'px' }">{{ index + 1 + '. ' +
          (item.text ? item.text : item) }}</p>
    </div>
  </div>
</template>


<style lang='scss' scoped>
.swipe {
  width: 100%;
  height: 25px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  background-color: antiquewhite;
  font-size: 14px;

  .horn-box {
    height: 100%;
    display: flex;
    align-items: center;

    .horn {
      font-size: 25px;
      width: 25px;

      animation: scrollMsg 1s linear infinite;
    }
  }

  .message {
    padding: 0 10px;
    overflow: hidden;
    flex: 1;
    position: relative;
    height: 100%;

    p {
      position: absolute;
      top: 0;
      margin: 0;
      white-space: nowrap;
      // padding-right: 30px;
      height: 100%;
      line-height: 25px;
    }
  }
}


@keyframes scrollMsg {
  0% {
    transform: rotate(0);
  }

  50% {
    transform: rotate(-10deg);
  }

  100% {
    transform: rotate(0);
  }
}
</style>